<template>
	<view class="myOrderBox pb10">
		
		<view class="orderTitle">
				<uv-tabs 
				
					:scrollable="true"
						:list="tabList" 
						lineWidth="30" 
						lineColor="#3F7865" 
						@change	="changeTab"
						:activeStyle="{
							color: '#3F7865',
							
							
				    	}"
						:inactiveStyle="{
							color: '#606266',
							transform: 'scale(1)'
						}" 
						customStyle="width:706rpx;margin:0 auto"
						itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
						></uv-tabs>

		<!-- 	<view :class="[titleFlag==1?'active':'titleItem']" @click="unpaidBtn(1)">
				全部
			</view>
            <view :class="[titleFlag==2?'active':'titleItem']" @click="unpaidBtn(2)">
            	付款中
            </view>
            <view :class="[titleFlag==3?'active':'titleItem']" @click="unpaidBtn(3)">
            	已完成
            </view>
			<view :class="[titleFlag==4?'active':'titleItem']" @click="unpaidBtn(4)">
				已违约
			</view>
			<view :class="[titleFlag==5?'active':'titleItem']" @click="unpaidBtn(5)">
				取消
			</view> -->
		</view>
		<view class="mb10" style="height: 90rpx;">
			
		</view>
		<!-- <view class="cardBox" v-for="(item,index) in orderList" :key="index" @click="toMain(item)"> -->
            <view class="artItem plr16 pt15 pb15  mlr10 mb10 radius6 " v-for="(i,n) in orderList" :key="n" >
                
              
                <view class=" justify-between align-center  posRelative ">
					<image :src="i.image" mode=""></image>
					<view class="flex-col justify-between" style="width: 360rpx;height: 173rpx;">
						<view class="title clamp2 mb5">
							{{i.title}}
						</view>
						<view class="">
							 <view class="stages">
							 	¥{{i.qishu_price}} ×{{i.qishu}}期
							 </view>
							 <view class="justify-between align-end mt5">
							 	<text class="money">¥ {{i.price}}</text>
								
							 </view>
						</view>
					</view>
					<view class="status" :style="i.review==3?'color:orangered':i.review==1?'color:#3F7865': ''">
						{{i.review==3?'未通过':i.review==1?'已上架': '未审核'}}
					</view>
                </view>
				<view class="align-center justify-between mt15  pt13  flex1 orderdesc">
					
					<view class="flex1 justify-end">
						<view class="del" @click="del(i)">
							删除
						</view>
						<view class="cancel" @click="edit(i)" >
							修改
						</view>
					</view>
					
				</view>
				<view class="" style="color: orangered;" v-if="i.review==3">
					拒绝原因：{{i.xiaoxi}}
				</view>
            </view>
		<!-- </view> -->
        <view class="" v-if="orderList.length==0">
            <uv-empty mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>
        </view>
		<view class="" style="height: 110rpx;">
			
		</view>
		<view class=" bgWhite paybtn">
		  
		    <view class="justify-between align-center">
		    
		        <view @click="add" class="onlinePay">新增商品</view>
		    </view>
		  
		    
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleFlag: 1,
                orderList:[],
               category_id:"",
				page:1,
				tabList:[],
			
				

			};
		},
		onShow() {
			this.page=1
			this.orderList=[]
			this.category_id=''
			this.getOrder()
		},
	
		onReachBottom() {
				if(this.orderList.length<this.total){
					this.page++
					this.getOrder()
				}
		},
		methods: {
			changeTab(val){
				
				this.category_id=val.id
				this.page=1
				this.orderList=[]
				this.getOrder()
				
			},
            formateTime(data){
              return this.$utils.formatDateTime(data)  
            },
			unpaidBtn(type){
					this.titleFlag=type
					this.page=1
					this.orderList=[]
					this.getOrder()
			},
			async getOrder() {
				uni.showLoading({
					title:'加载中'
				})
				let data = await this.$api.gysAllgoods({
					page: this.page,
					category_id:this.category_id
					
				})
				console.log(data)
				uni.hideLoading()
				if(data.code==1){
					this.tabList=[
						{
							name:'全部'
						}
					]
					this.tabList=this.tabList.concat(data.data.category)
					
					this.total = data.data.goods.total
					this.orderList = [...this.orderList,...data.data.goods.rows]
				}
                
			},

            toMain(item){
				
                    uni.navigateTo({
                        url:'/pages/orderDetail/index?id='+item.id
                    })
            },
			edit(item){
				uni.navigateTo({
					url:'/pages/addGoods/index?id='+item.id
				})
			},
				
			add(){
				uni.navigateTo({
					url:'/pages/addGoods/index'
				})
			},
			del(i){
				let vm =this
				uni.showModal({
					content:'确定要删除该商品吗',
					success:function(res){
						if(res.confirm){
									
								vm.$api.delgoods({id:i.id}).then(res=>{
									vm.$utils.msg('操作成功')
									vm.orderList=[]
									vm.page=1
									vm.getOrder()
								})
						}
					}
				})
				
			}
          
		}
	}
</script>

<style lang="scss" scoped>
	.myOrderBox {
		min-height: 100vh;
		position: relative;
		background-color: RGBA(245, 245, 245, 1);

		.orderTitle {
			width: 750rpx;
			height: 90rpx;
			background-color: #FFFFFF;
			display: flex;
			font-size: 32rpx;
			color: #444;
			position: fixed;
			top: 0;
            // border-bottom: 2rpx solid  rgba(151,151,151,0.062);
			.titleItem {
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				flex-basis: 0rpx;
				flex-grow: 1;
				font-weight: 500;
			}

			.active {
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				flex-basis: 0rpx;
				flex-grow: 1;
				color: #3F7865;
				position: relative;
				font-weight: 500;
			}

			.active::after {
				position: absolute;
				content: "";
				width: 49rpx;
				height: 8rpx;
				background: #3F7865;
				border-radius: 4rpx;
				bottom: 0rpx;
				left: 50%;
				transform: translateX(-50%);
				
			}
		}

	}	
    .submitPz{
        width: 165rpx;
        height: 54rpx;
        background: #434343;
        border-radius: 6rpx;
        font-size: 24rpx;
        color: #FFFFFF;
        text-align: center;
        line-height: 54rpx;
    }
    .artItem {
        
		background-color: #fff;
        font-size: 28rpx;
        color: #999999;
        
        image{
        width: 237rpx;
        height: 173rpx;
            border-radius: 8rpx;
            margin-right: 26rpx;
        }
		.title{
			font-weight: bold;
			font-size: 30rpx;
			color: #222222;
		}	
        .orderdesc{
			border-top: 1rpx solid #EFEFEF;
		}
		.stages{
			border-radius: 5rpx;
			border: 1px solid #3F7865;
			color: #3F7865;
			font-size: 22rpx;
			display: inline-block;
			line-height: 22rpx;
			padding: 5rpx 8rpx;
		}
		.money{
			font-weight: 500;
			font-size: 34rpx;
			color: #333333;
		}
		.del{
			width: 130rpx;
			height: 56rpx;
			
			border-radius: 28rpx;
			
			
			font-weight: 400;
			font-size: 26rpx;
			margin-left: 14rpx;
			color: #666666;
			text-align: center;
			line-height: 56rpx;
			background: #F5F5F7;
		}
		.cancel{
			width: 130rpx;
			height: 56rpx;
			
			border-radius: 28rpx;
			
			background-color: #3F7865;
			font-weight: 400;
			font-size: 26rpx;
			margin-left: 14rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 56rpx;
		}
    }
	.paybtn{
	    
	    position: fixed;
	    bottom: 0;
	    width: 100%;
	    padding:20rpx 30rpx;
		z-index: 999;
	    background-color: #fff;
	    .onlinePay{
	        width: 100%;
	        height: 88rpx;
	        background: #FFFFFF;
	        border-radius: 12rpx ;
	        color: #fff;
	        font-size: 34rpx;
	        background: #49806F;
	        line-height: 88rpx;
	        
	        
	        text-align: center;
	    }
	        }
			.status{
				position: absolute;
				right: 0;
				top: 0;
			}
</style>